<template>
	<view class="container">
		<!-- 顶部弹出提示框 -->
		<u-top-tips ref="uTips"></u-top-tips>
		<Steps :stepIndex="0"></Steps>
		<u-form :model="addMerForm" :rules="merFormRules" ref="merFormRef" label-width="5rem">
			<u-form-item label-position="left" label="营业执照" prop="business_license" label-width="150"  v-if="merType==1||merType==2||merType==3||merType==6">
				<u-upload :show-progress="false"   action="http://openpay.duolaibei.com/admin/upload/businessLicense" name="image"
				 max-count="1" width="160" height="160" @on-choose-complete="upLoadBefore" @on-success="sanheyiUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item label="商户名称" prop="user_name">
				<u-input v-model="addMerForm.user_name" placeholder="请输入营业执照名称"/>
			</u-form-item>
			<u-form-item label="商户简称" prop="nick_name">
				<u-input v-model="addMerForm.nick_name" />
			</u-form-item>
			<u-form-item label="组织机构代码" prop="org_num" v-if="merType==1||merType==2||merType==3||merType==6">
				<u-input v-model="addMerForm.org_num" />
			</u-form-item>
			<u-form-item label="联系地址" prop="address">
				<u-input v-model="addMerForm.address" />
			</u-form-item>
			<u-form-item label-position="left" label="证件类型" prop="cert_type">
				<u-radio-group v-model="addMerForm.cert_type" @change="radioGroupChange" width="auto" :wrap="false">
					<u-radio shape="circle" v-for="(item, index) in certTypeList" :key="index" :name="item.name" >{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="身份证正面" prop="front_card"  label-width="150">
				<u-upload :show-progress="false"  action="http://openpay.duolaibei.com/admin/upload/idcardFront" name="image"
				 max-count="1" width="160" height="160" @on-choose-complete="upLoadBefore" @on-success="cardFrontUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item label-position="left" label="身份证反面" prop="back_card" label-width="150">
				<u-upload :show-progress="false" action="http://openpay.duolaibei.com/admin/upload/idcardBack" name="image"
				 max-count="1" width="160" height="160" @on-choose-complete="upLoadBefore" @on-success="cardBackUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item label="法人名字" prop="legal_person">
				<u-input v-model="addMerForm.legal_person" />
			</u-form-item>
			<u-form-item label="法人身份证号" prop="legal_person_id">
				<u-input v-model="addMerForm.legal_person_id" />
			</u-form-item>
<!-- 			<u-form-item label-position="left" label="身份证起日期" prop="id_card_start_date">
				<u-input :border="false" type="select" :select-open="timePickerShow" v-model="addMerForm.id_card_start_date"
				 placeholder="请选择身份证开始日期" @click="openTimePicker('start')"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="身份证始日期" prop="id_card_end_date">
				<u-input :border="false" type="select" :select-open="timePickerShow" v-model="addMerForm.id_card_end_date"
				 placeholder="请选择身份证开始日期" @click="openTimePicker('end')"></u-input>
			</u-form-item> -->
			<u-form-item label="身份证起日期" prop="id_card_start_date">
				<u-input v-model="addMerForm.id_card_start_date" />
			</u-form-item>
			<u-form-item label="身份证始日期" prop="id_card_end_date">
				<u-input v-model="addMerForm.id_card_end_date" />
			</u-form-item>
			<u-form-item label="联系姓名" prop="linkman">
				<u-input v-model="addMerForm.linkman" />
			</u-form-item>
			<u-form-item label="联系电话" prop="mobile">
				<u-input v-model="addMerForm.mobile" maxlength="11"/>
			</u-form-item>
			<u-form-item label="商户邮箱" prop="email">
				<u-input v-model="addMerForm.email" />
			</u-form-item>
			<u-form-item label="联系人电话(选填)"  maxlength="11">
				<u-input v-model="addMerForm.link_phone" />
			</u-form-item>
			<u-form-item label="固定电话(选填)">
				<u-input v-model="addMerForm.tel" />
			</u-form-item>
		</u-form>
		<view class="btns-area">
			<u-button @click="addMer" type="warning" :plain="true">下一步</u-button>
		</view>
		<u-picker mode="time" v-model="timePickerShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
	import Steps from '@/components/steps/index.vue'
	export default {
		components:{
			Steps
		},
		data() {
			return {
				merType:0,
				addMerForm: {
					// 需要上传回显的数据要提前写好
					user_name:'',
					address:'',
					org_num:'',
					legal_person:'',
					legal_person_id:'',
					id_card_start_date:'',
					id_card_end_date:'',
					cert_type:'身份证',
					mobile:'',
					tel:'',
					imgObj:{}
				},
				// 证件类型选择
				certTypeList: [{
					name: '身份证',
					checked: true,
					disabled: true,
					value: 1
				}, ],

				// 时间picker选择器
				timePickerShow: false,
				// 时间选择器的类型
				timePickerType: '',
				// 语法校验
				merFormRules: {
					front_card:[
						{
							required: true,
							message: '请上传身份证正面',
							trigger: ['change','blur'],
							validator:(rule, value, callback)=>{
								if(this.addMerForm.imgObj.front_card==undefined){
									return false
								}
								return true
							}
						},
					],
					back_card:[
						{
							required: true,
							message: '请上传身份证反面',
							trigger: ['change','blur'],
							validator:(rule, value, callback)=>{
								if(this.addMerForm.imgObj.back_card==undefined){
									return false
								}
								return true
							}
						},
					],
					business_license:[
						{
							required: true,
							message: '请上传营业执照',
							validator:(rule, value, callback)=>{
								if(this.addMerForm.imgObj.business_license==undefined){
									return false
								}
								return true
							}
						},
					],
					user_name: [{
						required: true,
						message: '请输入商户名称',
						trigger: 'blur',
					}, ],
					nick_name: [{
						required: true,
						message: '请输入商户简称',
						trigger: 'blur',
					}, ],
					email: [{
						required: true,
						message: '请输入商户邮箱',
						trigger: 'blur',
					}, ],
					cert_type: [{
						required: true,
						message: '请选择证件类型',
						trigger: 'change',
					}, ],
					legal_person: [{
						required: true,
						message: '请输入法人名字',
						trigger: 'blur',
					}, ],

					legal_person_id: [{
						required: true,
						message: '请输入法人身份证号',
						trigger: 'blur',
					}, ],
					org_num: [{
						required: true,
						message: '请输入组织机构代码证',
						trigger: 'blur',
					}, ],
					address: [{
						required: true,
						message: '请输入联系地址',
						trigger: 'blur',
					}, ],
					linkman: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'blur',
					}, ],
					mobile: [{
						required: true,
						message: '请输入联系人电话',
						trigger: 'blur',
					}, ],
					id_card_start_date: [{
						required: true,
						message: '请选择身份证开始日期',
						trigger: 'blur',
					}, ],
					id_card_end_date: [{
						required: true,
						message: '请选择身份结束日期',
						trigger: 'blur',
					}, ],
				}
			}
		},
		onLoad(options) {
			this.merType=options.type;
			// 需要在这里获取商户选择的类型
		},
		onReady() {
			this.$refs.merFormRef.setRules(this.merFormRules);
		},
		methods: {
			upLoadBefore(){
				uni.showLoading({
					title:'努力上传中',
					mask:true
				});
			},
			cardFrontUpSuccess(data, index, lists, name) {
				let con=data.content;
				this.addMerForm.legal_person_id=con.idNumb;
				this.addMerForm.legal_person=con.name;
				this.addMerForm.imgObj.front_card=con.path;
				uni.hideLoading();
			},
			cardBackUpSuccess(data, index, lists, name) {
				let con=data.content;
				this.addMerForm.id_card_start_date=con.starttime;
				this.addMerForm.id_card_end_date=con.overtime;
				this.addMerForm.imgObj.back_card=con.path;
				uni.hideLoading();
			},
			sanheyiUpSuccess(data, index, lists, name){
				let con=data.content;
				this.addMerForm.address=con.address;
				// this.addMerForm.legal_person=con.legal_person;
				this.addMerForm.user_name=con.companyName;
				this.addMerForm.org_num=con.licenseNo
				this.addMerForm.imgObj.business_license=con.path;
				uni.hideLoading();
			},
			// 图片上传失败
			upLoadImgError() {
				// this.$refs.uTips.show({
				// 	title: '上传失败',
				// 	type: 'error',
				// 	duration: '2000'
				// })
			},
			// 身份类型选择发生变化
			radioGroupChange(e) {

			},
			openTimePicker(e) {
				this.timePickerShow = true;
				this.timePickerType = e;
			},
			// 选择日期回调
			regionConfirm(e) {
				switch (this.timePickerType) {
					case "start":
						this.addMerForm.id_card_start_date = e.year + '-' + e.month + '-' + e.day;
						break;
					case "end":
						this.addMerForm.id_card_end_date = e.year + '-' + e.month + '-' + e.day;
						break;
					default:
				}
			},
			// 基本资料填写完成下一步
			addMer() {
				let that = this,form=this.addMerForm;
				this.$refs.merFormRef.validate(valid => {
					if (valid) {
						form.cert_type=that.$myApi.labelFindVal(that.certTypeList,form.cert_type);
						uni.setStorageSync('addFormA',JSON.stringify(form));
						uni.navigateTo({
							url:`add-mer?type=${that.merType}`,
						})
					}else{
						uni.showToast({
							title:'请填写完整',
							icon:'none',
							duration:2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 96%;
		margin: 0 auto;
		padding-bottom: 2rem;

		.btns-area {
			margin-top: 2rem;
		}
	}
</style>
